<template>
  <div class="content">
    <div class="content-dv">
      <div class="loading-pop" id="progress">下载中...</div>
      <div class="head">
        <div class="head-logo" @click="jump"></div>
        <div class="head-left">
          <div
            v-if="menuId == 0"
            class="btn-item"
            :class="{ 'btn-item-a': roamFlag }"
            @click="roam"
          >
            <div class="btn-item-icon roam-icon"></div>
            <div class="btn-item-text">自动漫游</div>
          </div>
          <div class="btn-item" @click="sceneInit">
            <div class="btn-item-icon scene-icon"></div>
            <div class="btn-item-text">重置场景</div>
          </div>
        </div>
        <div class="head-right">
          <div>{{ dateObj.date }}</div>
          <div>{{ dateObj.week }}</div>
          <div style="color: white">{{ dateObj.time }}</div>
        </div>
        <div class="head-dv" v-if="menuId == 0">
          <div class="head-dv-item">
            <div class="head-dv-item-title">原煤运输系统</div>
            <div
              class="head-dv-item-name mt-25"
              @click="showHistory(1, '皮带机速度')"
            >
              皮带机速度：<span
                >{{ (topDatas[0].val / 40).toFixed(2) }}m/s</span
              >
            </div>
          </div>
          <div class="head-dv-item">
            <div class="head-dv-item-title">CDQ粉配加系统</div>
            <div class="head-dv-item-name" @click="showHistory(2, '灰仓重量')">
              灰仓重量：<span>{{ topDatas[1].val }}t</span>
            </div>
            <div
              class="head-dv-item-name"
              @click="showHistory(3, '输灰管压力')"
            >
              输灰管压力：<span>{{ topDatas[2].val }}pa</span>
            </div>
          </div>
          <div class="head-dv-item">
            <div class="head-dv-item-title">制粉系统</div>
            <div
              class="head-dv-item-name mt-25"
              @click="showHistory(4, '原煤仓料位')"
            >
              原煤仓料位：<span>{{ topDatas[3].val }}t</span>
            </div>
          </div>
          <div class="head-dv-item" style="width: 2.3rem">
            <div class="head-dv-item-title">喷吹系统</div>
            <div
              class="head-dv-item-name"
              style="width: 2.1rem"
              @click="showHistory(33, '输送气总管压力(阀后)')"
            >
              输送气总管压力(阀后)：<span>{{ topDatas[4].val }}Mpa</span>
            </div>
            <div class="head-dv-item-name" @click="showHistory(5, '喷煤速率')">
              喷煤速率：<span>{{ topDatas[5].val }}t/h</span>
            </div>
          </div>
          <div class="head-dv-big-item">
            <div class="head-dv-item-title">干燥剂系统</div>
            <div class="head-dv-big-names">
              <div
                class="head-dv-item-big-name"
                style="width: 1.5rem"
                @click="showHistory(6, '烟气炉温度')"
              >
                烟气炉温度：<span>{{ topDatas[6].val }}℃</span>
              </div>
              <div
                class="head-dv-item-big-name"
                @click="showHistory(7, '高炉煤气流量')"
              >
                高炉煤气流量：<span>{{ topDatas[7].val }}m³/h</span>
              </div>
              <div
                class="head-dv-item-big-name"
                style="width: 1.5rem"
                @click="showHistory(8, '焦炉煤气流量')"
              >
                焦炉煤气流量:<span>{{ topDatas[8].val }}m³/h</span>
              </div>
              <div
                class="head-dv-item-big-name"
                @click="showHistory(9, '助燃空气流量')"
              >
                助燃空气流量：<span>{{ topDatas[9].val }}m³/h</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="left">
        <div v-if="menuId == 0">
          <div class="title-item">
            <div class="title-item-text">运行情况</div>
            <div class="title-item-en">/ Operation</div>
          </div>
          <div class="operation-dv">
            <div class="operation-item">
              <div class="operation-item-id">1</div>
              <div class="operation-item-name">原煤运输系统</div>
              <div class="val-color">运行正常</div>
            </div>
            <div class="operation-item">
              <div class="operation-item-id">2</div>
              <div class="operation-item-name">CDQ粉配加系统</div>
              <div class="val-color">运行正常</div>
            </div>
            <div class="operation-item">
              <div class="operation-item-id">3</div>
              <div class="operation-item-name">制粉系统</div>
              <div class="val-color">运行正常</div>
            </div>
            <div class="operation-item">
              <div class="operation-item-id">4</div>
              <div class="operation-item-name">喷吹系统</div>
              <div class="val-color">运行异常</div>
            </div>
            <div class="operation-item">
              <div class="operation-item-id">5</div>
              <div class="operation-item-name">干燥剂系统</div>
              <div class="val-color">运行正常</div>
            </div>
            <div class="operation-item">
              <div class="operation-item-id">6</div>
              <div class="operation-item-name">消防泵房</div>
              <div class="val-color">运行正常</div>
            </div>
            <div class="operation-item">
              <div class="operation-item-id">7</div>
              <div class="operation-item-name">电气室</div>
              <div class="val-color">运行正常</div>
            </div>
          </div>
        </div>
        <div v-if="menuId == 0">
          <div class="nyxh mt-1">
            <div class="title-item1">
              <div class="title-item-text1">能源气体流量消耗累计</div>
            </div>
            <div class="nyqtllxh">
              <div
                class="nyqtllxh-item"
                @click="showHistory(10, '中压氮气总管流量日计')"
              >
                <div class="nyqtllxh-item-dv1">
                  <div class="nyqtllxh-item-dv1-text">
                    中压氮气总管流量
                    <p>m³</p>
                    <p></p>
                  </div>
                </div>
                <div class="nyqtllxh-item-dv2">
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-b"></div>
                    <div class="nyqtllxh-item-dv2-item-name">总计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-b">
                      {{ nyqtDatas[0].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-y"></div>
                    <div class="nyqtllxh-item-dv2-item-name">月计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-y">
                      {{ nyqtDatas[1].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon"></div>
                    <div class="nyqtllxh-item-dv2-item-name">日计</div>
                    <div class="nyqtllxh-item-dv2-item-val">
                      {{ nyqtDatas[2].val }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="nyqtllxh-item"
                @click="showHistory(11, '低压氮气总管流量日计')"
              >
                <div class="nyqtllxh-item-dv1">
                  <div class="nyqtllxh-item-dv1-text">
                    低压氮气总管流量
                    <p>m³</p>
                    <p></p>
                  </div>
                </div>
                <div class="nyqtllxh-item-dv2">
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-b"></div>
                    <div class="nyqtllxh-item-dv2-item-name">总计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-b">
                      {{ nyqtDatas[3].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-y"></div>
                    <div class="nyqtllxh-item-dv2-item-name">月计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-y">
                      {{ nyqtDatas[4].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon"></div>
                    <div class="nyqtllxh-item-dv2-item-name">日计</div>
                    <div class="nyqtllxh-item-dv2-item-val">
                      {{ nyqtDatas[5].val }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="nyqtllxh-item"
                @click="showHistory(12, '压缩空气总管流量日计')"
              >
                <div class="nyqtllxh-item-dv1">
                  <div class="nyqtllxh-item-dv1-text">
                    压缩空气总管流量
                    <p>m³</p>
                    <p></p>
                  </div>
                </div>
                <div class="nyqtllxh-item-dv2">
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-b"></div>
                    <div class="nyqtllxh-item-dv2-item-name">总计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-b">
                      {{ nyqtDatas[6].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-y"></div>
                    <div class="nyqtllxh-item-dv2-item-name">月计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-y">
                      {{ nyqtDatas[7].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon"></div>
                    <div class="nyqtllxh-item-dv2-item-name">日计</div>
                    <div class="nyqtllxh-item-dv2-item-val">
                      {{ nyqtDatas[8].val }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="nyqtllxh-item"
                @click="showHistory(13, '蒸汽总管流量日计')"
              >
                <div class="nyqtllxh-item-dv1">
                  <div class="nyqtllxh-item-dv1-text">
                    蒸汽总管流量
                    <p>m³</p>
                    <p></p>
                  </div>
                </div>
                <div class="nyqtllxh-item-dv2">
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-b"></div>
                    <div class="nyqtllxh-item-dv2-item-name">总计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-b">
                      {{ nyqtDatas[9].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-y"></div>
                    <div class="nyqtllxh-item-dv2-item-name">月计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-y">
                      {{ nyqtDatas[10].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon"></div>
                    <div class="nyqtllxh-item-dv2-item-name">日计</div>
                    <div class="nyqtllxh-item-dv2-item-val">
                      {{ nyqtDatas[11].val }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="nyqtllxh-item"
                @click="showHistory(14, '喷吹输送气流量日计')"
              >
                <div class="nyqtllxh-item-dv1">
                  <div class="nyqtllxh-item-dv1-text">
                    喷吹输送气流量
                    <p>m³</p>
                    <p></p>
                  </div>
                </div>
                <div class="nyqtllxh-item-dv2">
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-b"></div>
                    <div class="nyqtllxh-item-dv2-item-name">总计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-b">
                      {{ nyqtDatas[12].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-y"></div>
                    <div class="nyqtllxh-item-dv2-item-name">月计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-y">
                      {{ nyqtDatas[13].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon"></div>
                    <div class="nyqtllxh-item-dv2-item-name">日计</div>
                    <div class="nyqtllxh-item-dv2-item-val">
                      {{ nyqtDatas[14].val }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="nyqtllxh-item"
                @click="showHistory(15, '高炉煤气总管流量日计')"
              >
                <div class="nyqtllxh-item-dv1">
                  <div class="nyqtllxh-item-dv1-text">
                    高炉煤气总管流量
                    <p>m³</p>
                    <p></p>
                  </div>
                </div>
                <div class="nyqtllxh-item-dv2">
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-b"></div>
                    <div class="nyqtllxh-item-dv2-item-name">总计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-b">
                      {{ nyqtDatas[15].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-y"></div>
                    <div class="nyqtllxh-item-dv2-item-name">月计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-y">
                      {{ nyqtDatas[16].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon"></div>
                    <div class="nyqtllxh-item-dv2-item-name">日计</div>
                    <div class="nyqtllxh-item-dv2-item-val">
                      {{ nyqtDatas[17].val }}
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="nyqtllxh-item"
                @click="showHistory(16, '焦炉煤气总管流量日计')"
              >
                <div class="nyqtllxh-item-dv1">
                  <div class="nyqtllxh-item-dv1-text">
                    焦炉煤气总管流量
                    <p>m³</p>
                    <p></p>
                  </div>
                </div>
                <div class="nyqtllxh-item-dv2">
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-b"></div>
                    <div class="nyqtllxh-item-dv2-item-name">总计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-b">
                      {{ nyqtDatas[18].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon bc-y"></div>
                    <div class="nyqtllxh-item-dv2-item-name">月计</div>
                    <div class="nyqtllxh-item-dv2-item-val bc-y">
                      {{ nyqtDatas[19].val }}
                    </div>
                  </div>
                  <div class="nyqtllxh-item-dv2-item">
                    <div class="nyqtllxh-item-dv2-item-icon"></div>
                    <div class="nyqtllxh-item-dv2-item-name">日计</div>
                    <div class="nyqtllxh-item-dv2-item-val">
                      {{ nyqtDatas[20].val }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="menuId == 1 || menuId == 3">
          <div class="title-item" v-if="menuId == 1">
            <div class="title-item-text">设备列表</div>
            <div class="title-item-en">/ Device List</div>
          </div>
          <div class="title-item" v-if="menuId == 3">
            <div class="title-item-text">巡检设备</div>
            <div class="title-item-en">/ Inspection equipment</div>
          </div>
          <div class="sb-content">
            <div :key="i" v-for="(sb, i) in sbObj.lists">
              <div class="sb-item" @click="changeSb(sb, true, true)">
                <div
                  class="sb-item-icon"
                  :class="{ 'sb-item-active': sbObj.pid == sb.id }"
                ></div>
                <div class="sb-item-text">{{ sb.name }}</div>
              </div>
              <div class="sb-item-dv" v-if="sbObj.pid == sb.id">
                <div
                  class="sb-item-content"
                  :key="index"
                  v-for="(item, index) in sb.itemLists"
                >
                  <div
                    class="sb-item-name"
                    @click="changeSb(item, false, true)"
                    :class="{ 'sb-active': sbObj.id == item.id }"
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="auto-btn" v-if="autoFlag" @click="autoChecking">
            继续自动巡检
          </div>
        </div>
        <div v-if="menuId == 4">
          <div class="title-item">
            <div class="title-item-text">监控列表</div>
            <div class="title-item-en">/ Monitoring List</div>
          </div>
          <div class="monitor-content">
            <div
              class="monitor-item"
              :class="{ 'monitor-active': MonitorObj.id == item.id }"
              :key="i"
              v-for="(item, i) in MonitorObj.lists"
              @click="changeMonitor(item)"
            >
              <div class="monitor-item-text">{{ item.name }}</div>
            </div>
          </div>
        </div>
      </div>
      <div id="container"></div>
      <div class="right">
        <div v-if="menuId == 0">
          <div class="title-item1">
            <div class="title-item-text1">喷煤速率趋势</div>
          </div>
          <div class="pmslqs">
            <div id="pmslqs"></div>
          </div>
        </div>
        <div v-if="menuId == 0">
          <div class="stj mt-1">
            <div class="title-item1">
              <div class="title-item-text1">磨机冷却水流量消耗累计</div>
            </div>
            <div
              class="mjlqs"
              @click="showHistory(17, '磨机冷却水流量消耗日计')"
            >
              <div class="mjlqs-item">
                <div class="mjlqs-item-total">{{ zztDatas[0].val }}</div>
                <div class="mjlqs-item-month">{{ zztDatas[1].val }}</div>
                <div class="mjlqs-item-day">{{ zztDatas[2].val }}</div>
              </div>
              <div class="mjlqs-item-titles">
                <div class="mjlqs-item-title">总计 (t)</div>
                <div class="mjlqs-item-title">月计 (t)</div>
                <div class="mjlqs-item-title">日计 (t)</div>
              </div>
            </div>
            <div class="title-item1 mt-1">
              <div class="title-item-text1">引风机冷却水流量消耗累计</div>
            </div>
            <div
              class="mjlqs"
              @click="showHistory(18, '引风机冷却水流量消耗日计')"
            >
              <div class="mjlqs-item">
                <div class="mjlqs-item-total">{{ zztDatas[3].val }}</div>
                <div class="mjlqs-item-month">{{ zztDatas[4].val }}</div>
                <div class="mjlqs-item-day">{{ zztDatas[5].val }}</div>
              </div>
              <div class="mjlqs-item-titles">
                <div class="mjlqs-item-title">总计 (t)</div>
                <div class="mjlqs-item-title">月计 (t)</div>
                <div class="mjlqs-item-title">日计 (t)</div>
              </div>
            </div>
            <div class="title-item1 mt-1">
              <div class="title-item-text1">排粉风机冷却水流量消耗累计</div>
            </div>
            <div
              class="mjlqs"
              @click="showHistory(19, '排粉风机冷却水流量消耗日计')"
            >
              <div class="mjlqs-item">
                <div class="mjlqs-item-total">{{ zztDatas[6].val }}</div>
                <div class="mjlqs-item-month">{{ zztDatas[7].val }}</div>
                <div class="mjlqs-item-day">{{ zztDatas[8].val }}</div>
              </div>
              <div class="mjlqs-item-titles">
                <div class="mjlqs-item-title">总计 (t)</div>
                <div class="mjlqs-item-title">月计 (t)</div>
                <div class="mjlqs-item-title">日计 (t)</div>
              </div>
            </div>
            <div class="title-item1 mt-1">
              <div class="title-item-text1">煤粉重量累计</div>
            </div>
            <div class="mjlqs" @click="showHistory(20, '煤粉重量日计')">
              <div class="mjlqs-item">
                <div class="mjlqs-item-total">{{ zztDatas[9].val }}</div>
                <div class="mjlqs-item-month">{{ zztDatas[10].val }}</div>
                <div class="mjlqs-item-day">{{ zztDatas[11].val }}</div>
              </div>
              <div class="mjlqs-item-titles">
                <div class="mjlqs-item-title">总计 (t)</div>
                <div class="mjlqs-item-title">月计 (t)</div>
                <div class="mjlqs-item-title">日计 (t)</div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="sbObj.id">
          <div class="title-item">
            <div class="sb-title-text">{{ sbObj.title }}</div>
          </div>
          <div class="sb-info">
            <div class="sb-info-item" :key="i" v-for="(item, i) in sbObj.infos">
              <div class="sb-info-title" :title="item.name">
                {{ item.name }}
              </div>
              <div class="sb-info-value">{{ item.val }}</div>
              <div class="sb-info-unit">{{ item.unit }}</div>
            </div>
          </div>
        </div>
        <div v-if="MonitorObj.id">
          <div class="title-item">
            <div class="title-item-text">实时监控</div>
            <div class="title-item-en">/ Real-time Monitoring</div>
          </div>
          <div class="monitor-right-content"></div>
        </div>
      </div>
      <div class="foot">
        <div class="alarm" v-if="menuId == 2">
          <div class="title-item alarm-bg">
            <div class="title-item-text">今日告警</div>
            <div class="title-item-en">/ Today's alarm</div>
          </div>
          <div class="alarm-dv">
            <div class="alarm-item" style="color: #91befe">
              <div class="alarm-title0"></div>
              <div class="alarm-title1">严重性</div>
              <div class="alarm-title2"></div>
              <div class="alarm-title3">进入报警时间</div>
              <div class="alarm-title4">离开报警时间</div>
              <div class="alarm-title5">报警名称</div>
              <div class="alarm-title6">信息</div>
            </div>
            <div class="alarm-dv-content">
              <div class="alarm-item">
                <div class="alarm-title0"></div>
                <div class="alarm-title1">250</div>
                <div class="alarm-blue"></div>
                <div class="alarm-title3">2024.08.28 12:20:15</div>
                <div class="alarm-title4">2024.08.28 15:20:15</div>
                <div class="alarm-title5">C102 01 Bin38dV VC CISLS FB</div>
                <div class="alarm-title6">
                  2#喷吹系统 气压泄露报警 气压泄露报警
                </div>
              </div>
              <div class="alarm-item alarm-item-actived">
                <div class="alarm-title0"></div>
                <div class="alarm-title1">250</div>
                <div class="alarm-red"></div>
                <div class="alarm-title3">2024.08.28 12:20:15</div>
                <div class="alarm-title4">2024.08.28 15:20:15</div>
                <div class="alarm-title5">C102 01 Bin38dV VC CISLS FB</div>
                <div class="alarm-title6">
                  2#喷吹系统 气压泄露报警 气压泄露报警
                </div>
              </div>
              <div class="alarm-item">
                <div class="alarm-title0"></div>
                <div class="alarm-title1">250</div>
                <div class="alarm-red"></div>
                <div class="alarm-title3">2024.08.28 12:20:15</div>
                <div class="alarm-title4">2024.08.28 15:20:15</div>
                <div class="alarm-title5">C102 01 Bin38dV VC CISLS FB</div>
                <div class="alarm-title6">
                  2#喷吹系统 气压泄露报警 气压泄露报警
                </div>
              </div>
              <div class="alarm-item alarm-item-actived">
                <div class="alarm-title0"></div>
                <div class="alarm-title1">250</div>
                <div class="alarm-blue"></div>
                <div class="alarm-title3">2024.08.28 12:20:15</div>
                <div class="alarm-title4">2024.08.28 15:20:15</div>
                <div class="alarm-title5">C102 01 Bin38dV VC CISLS FB</div>
                <div class="alarm-title6">
                  2#喷吹系统 气压泄露报警 气压泄露报警
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="foot-dv">中冶华天工程技术有限公司钢铁设计研究总院V1.0</div>
        <div
          class="menu-item"
          :class="{ 'menu-active': i == menuId }"
          :key="i"
          v-for="(menu, i) in [
            '综合展示',
            '设备管理',
            '告警管理',
            '可视巡检',
            '安防联动',
          ]"
          @click="changeMenu(i)"
        >
          <div class="menu-item-icon" :class="'icon' + i"></div>
          <div class="menu-item-text">{{ menu }}</div>
        </div>
      </div>
      <div class="camera-label" id="cameraLabel">
        <div class="camera-title">{{ MonitorObj.title }}</div>
      </div>
      <div class="pop" v-if="popObj.flag">
        <div class="pop-title">{{ popObj.title }}历史曲线</div>
        <div class="pop-close" @click="closePop"></div>
        <div class="pop-date">
          <el-date-picker
            slot="prepend"
            v-model="popObj.searchTime"
            :picker-options="pickerOptions"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          >
          </el-date-picker>
          <div class="pop-btn" @click="search">确认</div>
          <div class="pop-btn" @click="down">导出</div>
        </div>
        <div class="pop-dv" id="history"></div>
      </div>
    </div>
  </div>
</template>
<script>
import pmClass from "../js/pm.js";
import _pmConfig from "../js/pmConfig.js";
import { getPointDatas, downDatas } from "../js/api.js";
import * as echarts from "echarts";
import * as mqtt from "mqtt";
let _timer = null,
  _timer1 = null,
  _mqttClient = null,
  _myCharts = {},
  _timerObj = { i: 0, j: 0 },
  _pmMain = null;
export default {
  name: "pm",
  data() {
    return {
      menuId: 0,
      dateObj: {
        date: "",
        week: "",
        time: "",
      },
      topDatas: [
        {
          mqtt_id: "BF3_UA65.PMCP65.M204_DH_AI",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.WI2102_AI_Scale",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.PI2111_AI_Scale",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.WI2101_AI_Scale",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA71.PMCI71.PI3103_P_AI_Scale",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA71.PMCI71.CI03_CommuDaTa_TagNum1",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.TI1102_TC_AI_Scale",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1103_F_Scale",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1104_F_Scale",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1102_F_Scale",
          val: 0,
        },
      ],
      nyqtDatas: [
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3001_F_Acc",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3001_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3001_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3002_F_Acc",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3002_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3002_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3004_F_Acc",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3004_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3004_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3003_F_Acc",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3003_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3003_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3101_F_Acc",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3101_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI3101_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1102_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1102_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1102_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1104_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1104_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FI1104_DAY_ACC",
          val: 0,
        },
      ],
      zztDatas: [
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0001_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0001_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0001_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0003_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0003_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0003_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0004_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0004_M_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA65.PMCP65.FTZ0004_DAY_ACC",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA71.PMCI71.CI03_ACC_YEAR",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA71.PMCI71.CI03_ACC_MOTH",
          val: 0,
        },
        {
          mqtt_id: "BF3_UA71.PMCI71.CMSD_ACCDay",
          val: 0,
        },
      ],
      sbObj: { pid: 0, id: 0, title: "", lists: [], infos: [] },
      MonitorObj: { id: 0, title: "", lists: [] },
      roamFlag: false,
      autoFlag: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      popObj: {
        title: "",
        id: "",
        searchTime: [],
        flag: false,
      },
    };
  },
  mounted() {
    _pmMain = new pmClass();
    window.addEventListener("beforeunload", this.handleBeforeUnload);
    _pmMain.initModel().then((res) => {
      this.initPage();
    });
  },
  methods: {
    down() {
      if (!this.popObj.searchTime) {
        this.$message.error("请选择日期时间");
        return;
      }
      if (this.popObj.searchTime[1] - this.popObj.searchTime[0] > 43200000) {
        this.$message.error("时间范围超出12小时");
        return;
      }
      let tempObj = {
        id: this.popObj.id,
        st: this.formatDate(this.popObj.searchTime[0]),
        et: this.formatDate(this.popObj.searchTime[1]),
      };
      downDatas(tempObj).then((response) => {
        const blob = new Blob([response]);
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = "export.xlsx";
        document.body.appendChild(link);
        link.click();
        URL.revokeObjectURL(url);
      });
    },
    search() {
      if (!this.popObj.searchTime) {
        this.$message.error("请选择日期时间");
        return;
      }
      if (this.popObj.searchTime[1] - this.popObj.searchTime[0] > 43200000) {
        this.$message.error("时间范围超出12小时");
        return;
      }
      this.popObj.flag = true;
      this.$nextTick(() => {
        this.initHistory("history");
      });
      let tempObj = {
        id: this.popObj.id,
        st: this.formatDate(this.popObj.searchTime[0]),
        et: this.formatDate(this.popObj.searchTime[1]),
      };
      getPointDatas(tempObj)
        .then((res) => {
          if (res.length > 0) {
            if (
              res[0].pointValue == -1 &&
              res[res.length - 1].pointValue == -1
            ) {
              this.popObj.flag = false;
              this.$message({
                message: "暂未查到" + this.popObj.title + "的历史轨迹",
                type: "error",
                duration: 6000,
              });
              this.doHistoryLists([]);
            } else {
              this.doHistoryLists(res);
            }
          }
        })
        .catch((error) => {
          this.$message({
            message: "暂未查到" + this.popObj.title + "的历史轨迹",
            type: "error",
            duration: 6000,
          });
          this.doHistoryLists([]);
        });
    },
    doHistoryLists(datas) {
      let tempObjs = {
        times: [],
        values: [],
      };
      if (this.popObj.id == 1) {
        datas.forEach((data) => {
          tempObjs.times.push(data.ts);
          tempObjs.values.push((data.pointValue / 40).toFixed(2));
        });
      } else {
        datas.forEach((data) => {
          tempObjs.times.push(data.ts);
          tempObjs.values.push(data.pointValue);
        });
      }
      this.chartShow("history", tempObjs);
    },
    closePop() {
      this.popObj.id = "";
      this.popObj.title = "";
      this.popObj.flag = false;
      this.popObj.searchTime = [];
      if (_myCharts.history) {
        _myCharts.history.dispose();
        _myCharts.history = null;
      }
    },
    showHistory(id, title) {
      if (this.popObj.id != id) {
        this.popObj.id = id;
        this.popObj.title = title;
        const currentDate = new Date();
        const twelveHoursAgo = new Date(
          currentDate.getTime() - 8 * 60 * 60 * 1000
        );
        this.popObj.searchTime = [twelveHoursAgo, currentDate];
        this.search();
      }
    },
    formatDate(time) {
      let date = new Date(time);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    initPage() {
      this.getNowdate();
      this.pmslShow();
      _timer = setInterval(this.getNowTime, 1000);
      this.sbObj.lists = _pmConfig.sbLists;
      this.MonitorObj.lists = _pmConfig.MonitorLists;
      this.mqtt();
    },
    mqtt() {
      // 10.205.48.147
      _mqttClient = mqtt.connect(_pmConfig.mqttObj.url, {
        username: _pmConfig.mqttObj.name,
        password: _pmConfig.mqttObj.pwd,
      });
      _mqttClient.on("connect", (connack) => {
        _mqttClient.subscribe("bfkep", { qos: 1 });
      });
      _mqttClient.on("message", (topic, message) => {
        let jsonObj = JSON.parse(message.toString());
        this.doData(jsonObj.values);
      });
    },
    doData(arrs) {
      if (this.menuId == 0) {
        this.doProcessData(this.topDatas, arrs);
        this.doProcessData(this.nyqtDatas, arrs);
        this.doProcessData(this.zztDatas, arrs);
      } else if (this.menuId == 1 || this.menuId == 3) {
        if (this.sbObj.id != 0) {
          this.doProcessData(this.sbObj.infos, arrs);
        }
      }
    },
    doProcessData(data, arrs) {
      const _doData = (_datas, _arrs) => {
        _datas.forEach((child) => {
          _arrs.some((item) => {
            if (child.mqtt_id == item.id) {
              if (child.mqtt_id == "BF3_UA65.PMCP65.PI2105_AI_Scale") {
                child.val = (+item.v / 1000).toFixed(2);
              } else {
                child.val = (+item.v).toFixed(2);
              }
              return true;
            }
          });
        });
      };
      _doData(data, arrs);
    },
    initHistory(name) {
      if (!_myCharts[name]) {
        _myCharts[name] = echarts.init(document.getElementById(name));
        _myCharts[name].setOption({
          color: ["#709AF7"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          grid: {
            top: "3%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          legend: {
            icon: "roundRect",
            textStyle: {
              color: "white",
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            axisLine: {
              show: false,
            },
          },
          yAxis: {
            type: "value",
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#ffffff",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#263a55",
              },
            },
          },
          series: [
            {
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: "rgba(32,70,144,0.01)",
                    },
                    {
                      offset: 0,
                      color: "rgba(32,70,144,0.6)",
                    },
                  ],
                },
              },
              type: "line",
              smooth: true,
            },
          ],
        });
      }
      _myCharts[name].showLoading({
        color: "#fff",
        textColor: "#fff",
        maskColor: "rgba(0,0,0,0.1)",
      });
    },
    chartShow(name, obj) {
      _myCharts[name].hideLoading();
      _myCharts[name].setOption({
        xAxis: {
          data: obj.times,
        },
        series: [
          {
            data: obj.values,
          },
        ],
      });
    },
    pmslShow() {
      let currentDate = new Date();
      let oneHoursAgo = new Date(currentDate.getTime() - 1 * 60 * 60 * 1000);
      let that = this,
        tempObj = {
          id: 5,
          st: this.formatDate(oneHoursAgo),
          et: this.formatDate(currentDate),
        };
      that.$nextTick(() => {
        that.initHistory("pmslqs");
      });
      getPointDatas(tempObj)
        .then((res) => {
          if (res.length > 0) {
            if (
              res[0].pointValue == -1 &&
              res[res.length - 1].pointValue == -1
            ) {
              this.$message({
                message: "暂未查到历史点位数据!",
                type: "error",
                duration: 6000,
              });
              that.chartShow("pmslqs", []);
            } else {
              let objs = {
                times: [],
                values: [],
              };
              res.forEach((data) => {
                objs.times.push(data.ts);
                objs.values.push(data.pointValue);
              });
              that.chartShow("pmslqs", objs);
            }
          }
        })
        .catch((error) => {
          this.$message({
            message: "暂未查到历史点位数据!",
            type: "error",
            duration: 6000,
          });
          that.chartShow("pmslqs", []);
        });
    },
    formatDate(time) {
      let date = new Date(time);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    roam() {
      this.roamFlag = !this.roamFlag;
      _pmMain.roamAnimate(this.roamFlag);
    },
    sceneInit() {
      _pmMain.sceneInit();
    },
    changeMonitor(obj) {
      if (this.MonitorObj.id != obj.id) {
        this.MonitorObj.id = obj.id;
        this.MonitorObj.title = obj.name;
        _pmMain.changeCamera(obj);
      }
    },
    changeSb(obj, isPid = true, flag = false) {
      if (flag && this.menuId == 3 && _timer1) {
        clearInterval(_timer1);
        _timer1 = null;
        this.autoFlag = true;
      }
      if (isPid) {
        if (this.sbObj.pid != obj.id) {
          this.sbObj.pid = obj.id;
          this.sbObj.id = 0;
          if (this.menuId == 3) {
            _pmMain.changeSbModel(obj.name);
          }
        } else {
          this.sbObj.pid = 0;
          this.sbObj.id = 0;
        }
      } else {
        if (this.sbObj.id != obj.id) {
          _pmMain.changeModel(obj);
          this.sbObj.id = obj.id;
          this.sbObj.title = obj.name;
          this.sbObj.infos = _pmConfig.sbInfos[obj.id];
        }
      }
    },
    autoChecking() {
      this.autoFlag = false;
      if (this.sbObj.pid == this.sbObj.lists[_timerObj.i].id) {
        this.sbObj.pid = 0;
      }
      this.autoCheck();
    },
    autoCheck() {
      this.changeSb(this.sbObj.lists[_timerObj.i]);
      _timer1 = setInterval(() => {
        if (_timerObj.j < this.sbObj.lists[_timerObj.i].itemLists.length) {
          this.changeSb(
            this.sbObj.lists[_timerObj.i].itemLists[_timerObj.j],
            false
          );
          _timerObj.j++;
        } else {
          _timerObj.i++;
          if (_timerObj.i == 5) {
            clearInterval(_timer1);
            _timer1 = null;
            return;
          }
          this.changeSb(this.sbObj.lists[_timerObj.i]);
          _timerObj.j = 0;
        }
      }, 10000);
    },
    changeMenu(id) {
      if (this.menuId != id) {
        if (this.menuId == 0) {
          this.popObj.id = "";
          this.popObj.title = "";
          this.popObj.flag = false;
          this.popObj.searchTime = [];
          for (let key in _myCharts) {
            if (_myCharts[key]) {
              _myCharts[key].dispose();
              _myCharts[key] = null;
            }
          }
        } else if (this.menuId == 1 || this.menuId == 3) {
          this.sbObj.pid = 0;
          this.sbObj.id = 0;
          this.sbObj.title = "";
          this.sbObj.infos = [];
          if (this.menuId == 3) {
            if (_timer1) {
              clearInterval(_timer1);
              _timer1 = null;
            }
            (_timerObj.i = 0),
              (_timerObj.j = 0),
              _pmMain.changeSbModel("", false);
          }
        } else if (this.menuId == 4) {
          this.MonitorObj.id = 0;
          this.MonitorObj.title = "";
        }
        _pmMain.sceneInit();
        this.menuId = id;
        if (this.roamFlag) {
          this.roamFlag = false;
          _pmMain.roamAnimate(false);
        }
        if (id == 0) {
          this.$nextTick(() => {
            this.pmslShow();
          });
        } else if (id == 3) {
          this.autoCheck();
        }
      }
    },
    handleBeforeUnload() {
      if (_timer) {
        clearInterval(_timer);
        _timer = null;
      }
      if (_timer1) {
        clearInterval(_timer1);
        _timer1 = null;
      }
      if (_mqttClient) {
        _mqttClient.end();
        _mqttClient = null;
      }
      for (let key in _myCharts) {
        if (_myCharts[key]) {
          _myCharts[key].dispose();
          _myCharts[key] = null;
        }
      }
      _pmMain.destroy();
    },
    getNowTime() {
      var date = new Date();
      var hour = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      hour = hour < 10 ? "0" + hour : hour;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      if (hour == "00" && minutes == "01" && seconds == "02") {
        this.getNowdate();
      }
      this.dateObj.time = hour + ":" + minutes + ":" + seconds;
    },
    getNowdate() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = String(currentDate.getMonth() + 1).padStart(2, "0");
      const day = String(currentDate.getDate()).padStart(2, "0");
      this.dateObj.date = `${year}.${month}.${day}`;
      var weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      this.dateObj.week = weekArr[currentDate.getDay()];
    },
    jump() {
      this.$router.push({ name: "index" });
    },
  },
  beforeDestroy() {
    this.handleBeforeUnload();
  },
};
</script>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  background: url("../../static/images/bg.png") no-repeat;
  background-size: 100% 100%;
}
.content-dv {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: url("../../static/images/bg-mask.png") no-repeat;
  background-size: 100% 100%;
}
.loading-pop {
  z-index: 999999;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.2rem;
  font-weight: bold;
  color: white;
}
.head {
  position: absolute;
  top: 0;
  right: 0.02rem;
  left: 0.02rem;
  z-index: 99;
  width: 19.16rem;
  height: 0.75rem;
  background: url("../../static/images/logo_bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.head-logo {
  width: 8rem;
  height: 0.4rem;
  background: url("../../static/images/logo.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.head-left {
  position: absolute;
  top: 0.32rem;
  left: 0.3rem;
  z-index: 999;
  width: 2.7rem;
  height: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.btn-item {
  width: 1.3rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../static/images/button.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.btn-item-a {
  background: url("../../static/images/menu_a.png") no-repeat;
  background-size: 1.3rem 0.4rem;
}
.btn-item-icon {
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.1rem;
}
.roam-icon {
  background: url("../../static/images/zdmy.png") no-repeat;
  background-size: 100% 100%;
}
.scene-icon {
  background: url("../../static/images/czcj.png") no-repeat;
  background-size: 100% 100%;
}
.btn-item-text {
  font-size: 0.18rem;
  color: white;
}
.head-right {
  position: absolute;
  top: 0.35rem;
  right: 0.32rem;
  z-index: 999;
  width: 2.8rem;
  height: 0.3rem;
  line-height: 0.3rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.18rem;
  color: #91befe;
}
.head-dv {
  position: absolute;
  top: 0.82rem;
  left: 50%;
  z-index: 999;
  width: 11.5rem;
  height: 1.04rem;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  animation: fadeIn 1.5s;
}
.head-dv-item {
  width: 1.97rem;
  height: 1.04rem;
  background: url("../../static/images/head_bg.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.12rem;
  color: white;
  margin-right: 0.05rem;
}
.head-dv-big-item {
  width: 3.25rem;
  height: 1.04rem;
  background: url("../../static/images/head_b_bg.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.12rem;
  color: white;
}
.head-dv-item-title {
  font-size: 0.14rem;
  height: 0.25rem;
  line-height: 0.25rem;
  padding-top: 0.12rem;
  margin-bottom: 0.1rem;
  text-align: center;
}
.head-dv-big-names {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.head-dv-item-name {
  margin-top: 0.1rem;
  margin-left: 0.12rem;
  width: 1.7rem;
  cursor: pointer;
}
.head-dv-item-big-name {
  margin-top: 0.06rem;
  width: 1.62rem;
  cursor: pointer;
}
.head-dv-item-big-name span,
.head-dv-item-name span {
  color: #f1b91e;
  font-weight: 600;
}
.mt-0 {
  margin-top: 0;
}
.mt-25 {
  margin-top: 0.25rem;
}
.left {
  position: absolute;
  top: 0.9rem;
  left: 0.1rem;
  z-index: 999;
  width: 3.2rem;
}
.title-item {
  width: 3.2rem;
  height: 0.32rem;
  line-height: 0.32rem;
  background: url("../../static/images/title_bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
}
.mt-1 {
  margin-top: 0.05rem;
}
.sb-title-text {
  font-family: "PM-FONT";
  width: 2.9rem;
  font-size: 0.2rem;
  font-weight: 500;
  color: white;
  margin-left: 0.3rem;
}
.title-item-text {
  font-family: "PM-FONT";
  max-width: 1.5rem;
  font-size: 0.2rem;
  color: white;
  margin-left: 0.35rem;
}
.title-item-en {
  margin-left: 0.15rem;
  font-size: 0.12rem;
  color: #4882d8;
}
.operation-dv {
  width: 3.2rem;
  max-height: 2.2rem;
  overflow: auto;
}
.operation-item {
  width: 3.2rem;
  height: 0.3rem;
  border-bottom: 1px solid #263a55;
  font-size: 0.15rem;
  color: white;
  display: flex;
  align-items: center;
  background: rgba(2, 21, 53, 0.5);
}
.operation-item-id {
  width: 0.16rem;
  height: 0.16rem;
  line-height: 0.16rem;
  border: 2px solid #4d8ee9;
  color: #8fbbfb;
  text-align: center;
  margin-left: 0.15rem;
}
.operation-item-name {
  margin-left: 0.2rem;
  width: 1.8rem;
}
.val-color {
  color: #179d58;
  font-weight: 600;
}
.operation-item-actived {
  background: linear-gradient(
    to right,
    rgba(170, 28, 75, 0.9),
    rgba(61, 60, 93, 0.3)
  );
}
.operation-item-actived .val-color {
  color: #ca3262;
  text-shadow: 2px 1px #2e4b92;
}
.sb-content {
  max-height: 7.8rem;
  overflow-y: auto;
  animation: fadeIn 2s;
}
.sb-item {
  width: 3rem;
  height: 0.36rem;
  margin: 0.15rem 0 0.05rem 0.1rem;
  display: flex;
  align-items: center;
  background: url("../../static/images/sb_bg.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.sb-item-icon {
  width: 0.22rem;
  height: 0.22rem;
  margin-left: 0.05rem;
  margin-right: 0.13rem;
  background: url("../../static/images/close.png") no-repeat;
  background-size: 100% 100%;
}
.sb-item-active {
  background: url("../../static/images/open.png") no-repeat;
  background-size: 100% 100%;
}
.sb-item-text {
  line-height: 0.36rem;
  font-size: 0.16rem;
  color: white;
}
.sb-item-dv {
  max-height: 4.96rem;
  overflow-y: auto;
}
.sb-item-content {
  width: 3rem;
  margin-left: 0.1rem;
  background: rgba(30, 56, 97, 0.3);
}
.sb-item-name {
  line-height: 0.36rem;
  font-size: 0.16rem;
  color: white;
  padding-left: 0.4rem;
  cursor: pointer;
}
.sb-active {
  background: url("../../static/images/sb_a.png") no-repeat;
  background-size: 2.9rem 0.36rem;
  background-position: 0.05rem;
}
.auto-btn {
  width: 2rem;
  height: 0.5rem;
  line-height: 0.55rem;
  background: url("../../static/images/btn.png") no-repeat;
  background-size: 100% 100%;
  font-size: 0.18rem;
  font-weight: 600rem;
  color: white;
  text-align: center;
  margin-left: 0.6rem;
  margin-top: 0.05rem;
  cursor: pointer;
}
.monitor-content {
  max-height: 7.5rem;
  overflow-y: auto;
  padding-bottom: 0.18rem;
  background: rgba(30, 56, 97, 0.3);
}
.monitor-item {
  width: 3rem;
  height: 0.36rem;
  margin-left: 0.1rem;
  margin-top: 0.18rem;
  background: url("../../static/images/sb_bg.png") no-repeat;
  background-size: 100% 100%;
  line-height: 0.36rem;
  font-size: 0.16rem;
  color: white;
  cursor: pointer;
}
.monitor-active {
  width: 3rem;
  height: 0.36rem;
  background: url("../../static/images/sb_a.png") no-repeat;
  background-size: 100% 100%;
}
.monitor-item-text {
  margin-left: 0.1rem;
}
#container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
.right {
  position: absolute;
  top: 0.9rem;
  right: 0.1rem;
  z-index: 999;
  width: 3.2rem;
}
.title-item1 {
  width: 3.2rem;
  height: 0.34rem;
  line-height: 0.34rem;
  background: url("../../static/images/title_bg1.png") no-repeat;
  background-size: 100% 100%;
}
.title-item-text1 {
  font-weight: 600;
  font-size: 0.16rem;
  color: white;
  margin-left: 0.42rem;
}
.pmslqs {
  width: 3.2rem;
  height: 2.5rem;
  background: rgba(2, 21, 53, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
#pmslqs {
  width: 3rem;
  height: 2.3rem;
}
.nyxh {
  width: 3.2rem;
  height: 5.8rem;
  background: rgba(30, 56, 97, 0.6);
}
.stj {
  height: 5.5rem;
  overflow-y: auto;
  background: rgba(30, 56, 97, 0.6);
}

.nyqtllxh {
  width: 3.2rem;
  height: 5.4rem;
  overflow-y: auto;
}
.nyqtllxh-item {
  width: 3rem;
  height: 1rem;
  margin-left: 0.1rem;
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.nyqtllxh-item-dv1 {
  width: 1rem;
  height: 1rem;
  background: url("../../static/images/circle_bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nyqtllxh-item-dv1-text {
  width: 0.5rem;
  font-size: 0.11rem;
  color: white;
  text-align: center;
}
.nyqtllxh-item-dv1-text p {
  color: #5a77b5;
}
.nyqtllxh-item-dv2 {
  width: 1.8rem;
  height: 0.85rem;
}
.nyqtllxh-item-dv2-item {
  width: 1.8rem;
  height: 0.28rem;
  border-bottom: 1px dashed #203551;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.12rem;
  color: white;
}
.nyqtllxh-item-dv2-item-icon {
  width: 0.06rem;
  height: 0.06rem;
  border-radius: 50%;
  border: 0.03rem solid white;
}
.nyqtllxh-item-dv2-item-name {
  width: 0.25rem;
  height: 0.2rem;
  line-height: 0.18rem;
  text-align: center;
}
.nyqtllxh-item-dv2-item-val {
  width: 1.2rem;
  height: 0.2rem;
  text-align: right;
  margin-right: 0.06rem;
}
.bc-b {
  border-color: #3d6fda;
  color: #3d6fda;
}
.bc-y {
  border-color: #ffc60c;
  color: #ffc60c;
}
.mjlqs {
  width: 3.2rem;
  height: 1.38rem;
  font-size: 0.12rem;
  color: white;
  cursor: pointer;
}
.mjlqs-item {
  width: 2rem;
  height: 1.05rem;
  background: url("../../static/images/cylinder_bg.png") no-repeat;
  background-size: 100% 100%;
  margin: 0.06rem 0.6rem;
  position: relative;
}
.mjlqs-item-titles {
  margin-left: 0.6rem;
  width: 2rem;
  height: 0.2rem;
  display: flex;
  justify-content: space-between;
}
.mjlqs-item-title {
  width: 0.5rem;
  height: 0.2rem;
  text-align: center;
}
.mjlqs-item-total {
  width: 0.48rem;
  height: 0.75rem;
  position: absolute;
  left: 0.01rem;
  bottom: 0.04rem;
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(0, 91, 238, 0.9),
    rgba(0, 190, 255, 0.9)
  );
  border-top-left-radius: 8%;
  border-top-right-radius: 8%;
}
.mjlqs-item-month {
  position: absolute;
  left: 0.77rem;
  bottom: 0.05rem;
  width: 0.48rem;
  height: 0.5rem;
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(255, 183, 62, 0.9),
    rgba(255, 219, 65, 0.4)
  );
  border-top-left-radius: 8%;
  border-top-right-radius: 8%;
}
.mjlqs-item-day {
  position: absolute;
  right: 0;
  bottom: 0.05rem;
  width: 0.48rem;
  height: 0.3rem;
  text-align: center;
  background: linear-gradient(
    to bottom,
    rgba(89, 179, 255, 0.9),
    rgba(89, 179, 255, 0.1)
  );
  border-top-left-radius: 8%;
  border-top-right-radius: 8%;
}
.monitor-right-content {
  margin-top: 0.08rem;
  width: 3.2rem;
  height: 3.2rem;
  background: rgba(2, 21, 53, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}
.sb-info {
  margin-top: 0.05rem;
  padding: 0.05rem 0 0.15rem;
  width: 3.2rem;
  background: rgba(2, 21, 53, 0.6);
}
.sb-info-item {
  width: 3.15rem;
  height: 0.2rem;
  line-height: 0.2rem;
  margin-top: 0.1rem;
  margin-left: 0.05rem;
  font-size: 0.15rem;
  color: white;
  display: flex;
}
.sb-info-title {
  width: 2.1rem;
  margin-right: 0.03rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-info-value {
  width: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: #ffc60c;
}
.sb-info-unit {
  text-align: center;
  width: 0.4rem;
  font-size: 0.1rem;
}
.foot {
  position: absolute;
  bottom: 0.1rem;
  left: 50%;
  height: 0.8rem;
  z-index: 999;
  width: 8.5rem;
  height: 0.5rem;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
}
.foot-dv {
  position: absolute;
  bottom: 0.58rem;
  left: 50%;
  z-index: 999;
  width: 4.25rem;
  height: 0.2rem;
  transform: translateX(-50%);
  font-size: 0.15rem;
  color: #8598b1;
  opacity: 0.3;
  letter-spacing: 0.2em;
}
.alarm {
  position: absolute;
  bottom: 0.7rem;
  left: 50%;
  z-index: 999;
  width: 18.9rem;
  height: 2.35rem;
  transform: translateX(-50%);
  animation: fadeIn 1.5s;
}
.alarm-bg {
  width: 18.9rem;
  height: 0.32rem;
  background: url("../../static/images/alarm_bg.png") no-repeat;
  background-size: 100% 100%;
}
.alarm-dv {
  width: 18.9rem;
  height: 1.9rem;
  margin-top: 0.1rem;
  background: rgba(30, 56, 97, 0.3);
}
.alarm-dv-content {
  width: 18.9rem;
  max-height: 1.5rem;
  overflow-y: auto;
}
.alarm-item {
  width: 18.3rem;
  height: 0.3rem;
  margin-top: 0.05rem;
  margin-left: 0.3rem;
  border-bottom: 1px solid #09476b;
  font-size: 0.15rem;
  color: white;
  display: flex;
  align-items: center;
}
.alarm-item-actived {
  border: 1px solid #ff3864;
  background-color: rgba(255, 56, 100, 0.15);
}
.alarm-title0 {
  width: 0.4rem;
}
.alarm-title1 {
  width: 2rem;
}
.alarm-title2 {
  padding-right: 1.07rem;
  width: 0.23rem;
  height: 0.26rem;
  background: url("../../static/images/alarm_title2_bg.png") no-repeat;
  background-size: 0.23rem 0.26rem;
}
.alarm-title3 {
  width: 2rem;
}
.alarm-title4 {
  width: 2rem;
}
.alarm-title5 {
  width: 4.4rem;
}
.alarm-title6 {
  width: 5.6rem;
}
.alarm-blue {
  padding-right: 1.07rem;
  width: 0.23rem;
  height: 0.26rem;
  background: url("../../static/images/alarm_blue_bg.png") no-repeat;
  background-size: 0.23rem 0.26rem;
}
.alarm-red {
  padding-right: 1.07rem;
  width: 0.23rem;
  height: 0.26rem;
  background: url("../../static/images/alarm_red_bg.png") no-repeat;
  background-size: 0.23rem 0.26rem;
}
.menu-item {
  width: 1.6rem;
  height: 0.5rem;
  /* margin-left: 0.1rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../../static/images/menu.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.menu-item-icon {
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.1rem;
}
.menu-item-text {
  font-family: "PM-FONT";
  font-size: 0.22rem;
  color: white;
}
.menu-active {
  background: url("../../static/images/menu_a.png") no-repeat;
  background-size: 100% 100%;
}
.icon0 {
  background: url("../../static/images/zhzs.png") no-repeat;
  background-size: 100% 100%;
}
.icon1 {
  background: url("../../static/images/sbgl.png") no-repeat;
  background-size: 100% 100%;
}
.icon2 {
  background: url("../../static/images/gjgl.png") no-repeat;
  background-size: 100% 100%;
}
.icon3 {
  background: url("../../static/images/ksxj.png") no-repeat;
  background-size: 100% 100%;
}
.icon4 {
  background: url("../../static/images/afld.png") no-repeat;
  background-size: 100% 100%;
}
.camera-label {
  position: absolute;
  z-index: -1;
  width: 2rem;
  height: 0.5rem;
  background: url("../../static/images/camera.png") no-repeat center;
  background-size: 0.4rem 0.47rem;
}
.camera-title {
  width: 2rem;
  margin-top: -0.24rem;
  text-align: center;
  font-size: 0.15rem;
  color: #ffc60c;
}
.pop {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 11.86rem;
  height: 7.34rem;
  background: url("../../static/images/pop.png") no-repeat;
  background-size: 100% 100%;
}
.pop-title {
  position: absolute;
  top: 0.2rem;
  left: 0.3rem;
  width: 5rem;
  height: 0.35rem;
  line-height: 0.35rem;
  font-size: 0.18rem;
  color: white;
  font-weight: 600;
}
.pop-close {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.37rem;
  height: 0.36rem;
  background: url("../../static/images/pop_close.png") no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.pop-date {
  position: absolute;
  top: 0.65rem;
  left: 0.5rem;
  width: 10.86rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
}
.pop-btn {
  width: 1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  background: url("../../static/images/pop_btn.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 0.5rem;
  cursor: pointer;
  font-size: 0.18rem;
  color: white;
  font-weight: 600;
  text-align: center;
}
.pop-dv {
  position: absolute;
  top: 1.2rem;
  left: 0.43rem;
  width: 11rem;
  height: 5.8rem;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>
